<template>
    <div class="flex">
        <V3Echarts :height="props.height" :width="props.width" :options="option" isFirst />
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import { FontSize, YAXIS_NAME } from '@/stories/components/charts/chartConfig'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Array,
        default: () => {
            return [
                {
                    name: '湛江',
                    value: 6
                },
                {
                    name: '地市',
                    value: 9
                },
                {
                    name: '湛江',
                    value: 6
                },
                {
                    name: '地市',
                    value: 9
                }
            ]
        }
    },
    color: {
        type: Array,
        default: () => {
            return ['#a183e2', '#fe8151', '#00fffc', '#64baff', '#b4b3ca', '#f14313', '#d6a33d']
        }
    },
    unit: {
        type: String,
        default: '次'
    },
    height: {
        type: Number,
        default: 400
    },
    width: {
        type: Number,
        default: 650
    }
})
let option = ref({})

const initChart = () => {
    const chartDataCopy = JSON.parse(JSON.stringify(props.chartData))
    const max = chartDataCopy.reduce((prev: any, cur: any) => {
        return Math.max(prev, cur.value)
    }, 0)
    option.value = {
        animation: false,
        grid: {
            left: '15%',
            right: '-2%',
            top: '20%',
            bottom: '20%' //也可设置left和right设置距离来控制图表的大小
        },
        xAxis: [
            {
                data: chartDataCopy.map((item: any) => item.name),
                axisLine: {
                    show: true, //隐藏X轴轴线
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true,
                    alignWithLabel: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                },
                axisTick: {
                    show: true, //隐藏X轴刻度
                    alignWithLabel: true
                },
                axisLabel: {
                    show: true,
                    margin: 14,
                    fontSize: 14,

                    color: '#fff' //X轴文字颜色
                }
            },
            {
                data: chartDataCopy.map((item: any) => item.name),
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false //隐藏X轴刻度
                },
                axisLabel: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
                min: 0,
                max: max + 10,
                name: props.unit,
                nameLocation: 'end',
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#11417a'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: 14,
                    fontSize: 14,

                    color: 'rgba(204,204,204,0.8)' //X轴文字颜色
                }
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#deedf5'
                        },
                        {
                            offset: 0.5,
                            color: '#337db1'
                        },
                        {
                            offset: 1,
                            color: '#112741'
                        }
                    ])
                },
                data: chartDataCopy.map((item: any) => item.value),

                z: 10,
                zlevel: 1,
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    fontFamily: 'SJyunhei',
                    fontSize: 22,
                    color: '#fff'
                }
            },
            {
                // 分隔
                type: 'pictorialBar',
                itemStyle: {
                    color: '#243b53'
                },
                symbolRepeat: 'fixed',
                symbolMargin: 3,
                symbol: 'rect',
                symbolClip: true,
                symbolSize: [20, 4],
                symbolPosition: 'start',
                symbolOffset: [0, -1],
                // symbolBoundingData: this.total,
                data: chartDataCopy.map((item: any) => item.value),
                width: 30,
                z: 0,
                zlevel: 2
            },
            {
                xAxisIndex: 1,
                name: '1',
                type: 'bar',
                barWidth: 35,
                data: chartDataCopy.map((item: any) => max + 10),
                itemStyle: {
                    color: 'rgba(255,255,255,0.05)'
                },
                z: 10,
                zlevel: 0,
                label: {
                    show: false
                }
            }
        ]
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flex {
    width: 100%;
    height: v-bind('props.height');
}
</style>
